<template>
  <div class="container">
    <!-- 修改、添加表单 -->
    <el-form
      :model="formData"
      label-width="80px"
      :rules="formRules"
      ref="formData"
      class="operateForm"
      v-if="eventType === 'add' || eventType === 'update'"
    >
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item prop="name" label="姓名">
            <el-input
              v-model.trim="formData.name"
              placeholder="请输入"
              class="proInputWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item prop="tel" label="手机号">
            <el-input
              v-model.trim="formData.tel"
              placeholder="可用于自助修改和找回密码"
              class="proInputWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="建议使用姓名拼音"
              :disabled="isDisabled"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="登录密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入密码"
              @change="pwdChange"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item label="用户类型" prop="type">
            <el-select
              v-if="eventType === 'add'"
              v-model="formData.type"
              placeholder="请选择"
              clearable
              filterable
              :disabled="isDisabled"
            >
              <el-option label="地区管理员" value="AREAMANAGE" />
            </el-select>
            <!-- <el-select v-else
              v-model="formData.type"
              placeholder="请选择"
              clearable
              filterable
              :disabled="isDisabled">
              <el-option label="管理员" value="ADMIN"/>
              <el-option label="地区管理员" value="AREAMANAGE"/>
              <el-option label="政府单位" value="GOV"/>
              <el-option label="第三方平台" value="PLAT"/>
            </el-select> -->
            <span v-else>{{ adminDetail.inputTypeName || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="用户状态" prop="status">
            <el-select
              v-model="formData.status"
              placeholder="请选择"
              clearable
              filterable
              @change="selectChanged"
            >
              <el-option
                v-for="(item, index) in inputNameOption"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="alignCenter">
        <el-button
          class="commonBut saveBtn"
          type="primary"
          @click="saveEvent"
          :loading="isLoading"
          >保存</el-button
        >
        <el-button class="commonBut" @click="cancelEdit">取消</el-button>
      </el-row>
    </el-form>
    <!-- 详情 -->
    <el-row class="detailBox" v-else>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>姓名：</label>
          <span>{{ adminDetail.name || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>手机号：</label>
          <span>{{ adminDetail.tel || '--' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>用户名：</label>
          <span>{{ adminDetail.username || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>登录密码：</label>
          <span>{{ '******' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>用户类型：</label>
          <span>{{ adminDetail.inputTypeName || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>用户状态：</label>
          <span>{{ this.formDataEnabled || '--' }}</span>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'inputUserAccount',
  props: ['eventType', 'id', 'typeDesc', 'bankSiteId'],
  data() {
    //验证密码
    var validatePass = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error('密码长度应为6-18位'))
        } else {
          var regPass = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]a-zA-Z0-9]{6,18}$/
          if (!regPass.test(value)) {
            callback(new Error('密码仅支持数字、字母、符号组合，不支持空格'))
          } else {
            callback()
          }
        }
      }
    }
    var validateName = (rule, value, callback) => {
      //    console.log(1111,value)
      //   value = value.replace(/\s+/g, "");
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error('用户名为6-18位字母、数字、下划线_，不能是纯数字'))
        } else {
          var regName = /(?![0-9]+$)[0-9a-zA-Z_]{6,18}/
          if (!regName.test(value)) {
            callback(
              new Error('用户名为6-18位字母、数字、下划线_，不能是纯数字')
            )
          } else {
            callback()
          }
        }
      }
    }

    return {
      inputNameOption: [
        {
          name: '启用',
          value: 'ENABLED',
        },
        {
          name: '停用',
          value: 'DISABLE',
        },
      ],
      titleText: '用户管理',
      formDataEnabled: '',
      password: '',
      formData: {
        name: '',
        password: '',
        type: '',
        status: '',
        username: '',
        tel: '',
        enabled: '',
        linkman: '',
      },
      formRules: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        username: [
          { required: true, validator: validateName, trigger: 'blur' },
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
        type: [
          { required: true, message: '用户类型不能为空', trigger: 'change' },
        ],
        status: [
          { required: true, message: '用户状态不能为空', trigger: 'change' },
        ],
      },
      isLoading: false,
      adminDetail: {},
      canceltype: '',
      isShowSave: '',
      isDisabled: false,
    }
  },
  created() {
    //获取用户详情
    if (this.id) {
      this.getAdminDetail()
      this.isDisabled = true
    }
  },
  methods: {
    /**
     * @description: 单位名称选择
     */
    selectChanged(value) {
      this.formData.enabled = value
    },
    //返回
    goBack() {},
    //保存事件
    saveEvent() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.isLoading = true
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    submitFormUptate() {
      let data = {
        name: this.formData.name,
        password: this.password,
        type: this.formData.type,
        status: this.formData.status,
        username: this.formData.username,
        tel: this.formData.tel,
        enabled: this.formData.enabled,
        linkman: this.formData.linkman,
      }
      let url = 'api-m/inputUser/base/v1/add'
      if (this.eventType == 'update') {
        url = 'api-m/inputUser/base/v1/update'
        data.id = this.id
      }
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then((response) => {
          this.isLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            if (this.eventType == 'add') {
              this.id = response.data.result
            }
            setTimeout(() => {
              this.$emit('eventTypeChanged', 'detail', this.id)
              this.getAdminDetail()
              this.isDisabled = true
            }, 1500)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isLoading = false
          }
        })
        .catch((err) => {
          this.$message.error('保存失败')
          this.isLoading = false
        })
    },
    cancelEdit() {
      if (this.eventType == 'update') {
        this.$emit('eventTypeChanged', 'detail', this.id)
        this.getAdminDetail()
      } else {
        this.$router.push({
          path: '/home/interfacePlatform/inputUserManageList',
          name: 'inputUserManage',
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/inputUserManageList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //获取用户详情
    getAdminDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/detail',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.adminDetail = response.data.result
            this.formData.name = response.data.result.name
            this.formData.type = response.data.result.inputType
            this.formData.status = response.data.result.enabled
            this.formData.username = response.data.result.username
            this.formData.tel = response.data.result.tel
            this.formData.enabled = response.data.result.enabled
            this.formDataEnabled = response.data.result.enabledName
            this.formData.linkman = response.data.result.linkman
            this.formData.password = '******'
            this.password = response.data.result.password
          }
        })
        .catch((error) => {})
    },
    pwdChange(val) {
      this.password = val
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 197px;
    .operateForm {
      margin-top: 50px;
      .alignCenter {
        margin-top: 50px;
      }
      .el-select {
        width: 100%;
      }
    }
    .detailBox {
      margin-top: 50px;
      .el-row {
        margin-bottom: 22px;
        height: 40px;
        line-height: 40px;
        label {
          width: 80px;
          display: inline-block;
          text-align: right;
          font-size: 14px;
          color: #606266;
        }
      }
    }
    .operateBtn {
      width: auto;
      padding: 0 15px;
    }
    .el-cascader {
      width: 100%;
    }
  }
  /deep/.el-form-item__error {
    position: relative;
  }
}
.projectAuthorization {
  width: 100%;
  height: 200px;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border: 1px solid #dee5f4;
  margin-top: 10px;
  overflow-y: auto;
  .TagList {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    .projectAuthorizationTag {
      width: calc(100% - 20px);
      display: block;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      float: left;
    }
    .tagClose {
      float: left;
      cursor: pointer;
      line-height: 41px;
    }
    .tagClose:hover {
      color: red;
    }
  }
  .TagList:hover {
    background: #e4ebf1;
  }
}
</style>
